<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>first blog 登录-注册</title>
    <link rel="stylesheet" href="./css/login.css">
    <script type="text/javascript" src="../first-ui/components/Header/first-header-a.js"></script>
</head>

<body>
    <first-header-a></first-header-a>
    <div class="box">
    <div class="container">
        <div class="form-box">
            <!-- 注册 -->
            <div class="register-box hidden">
                <h1>注册</h1>
                <input type="text" placeholder="用户名">
                <input type="email" placeholder="邮箱">
                <input type="password" placeholder="密码">
                <input type="password" placeholder="确认密码">
                <button>注册</button>
            </div>
            <!-- 登录 -->
            <div class="login-box">
                <h1>登录</h1>
                <input type="text" placeholder="用户名">
                <input type="password" placeholder="密码">
                <button>登录</button>
            </div>
        </div>
        <div class="con-box left">
            <h2>已有帐号？</span></h2>
            <p>请登录🚀</p>
            <button id="login">去登录</button>
        </div>
        <div class="con-box right">
            <h2>没有帐号？</span></h2>
            <p>立即注册吧😃</p>
            <button id="register">去注册</button>
        </div>
    </div>

</div>
</div>
    <script>
        // 要操作到的元素
        let login=document.getElementById('login');
        let register=document.getElementById('register');
        let form_box=document.getElementsByClassName('form-box')[0];
        let register_box=document.getElementsByClassName('register-box')[0];
        let login_box=document.getElementsByClassName('login-box')[0];
        // 去注册按钮点击事件
        register.addEventListener('click',()=>{
            form_box.style.transform='translateX(80%)';
            login_box.classList.add('hidden');
            register_box.classList.remove('hidden');
        })
        // 去登录按钮点击事件
        login.addEventListener('click',()=>{
            form_box.style.transform='translateX(0%)';
            register_box.classList.add('hidden');
            login_box.classList.remove('hidden');
        })
    </script>
</body>
</html>